<template>
  <el-container v-loading="load">
    <el-card class="box-card"
      ><el-container style="margin-left: 30px"
        ><el-aside>
          <el-card style="background: #2d2e36">
            <template #header>
              <div class="card-header">
                <el-tooltip
                  class="box-item"
                  effect="light"
                  content="修改头像"
                  placement="bottom-start"
                >
                  <!--点击头像修改头像-->
                  <el-avatar />
                </el-tooltip>
                <el-button link color="red"
                  ><el-icon><Avatar /></el-icon>个人主页</el-button
                >
              </div>
            </template>
            <!-- 左侧项目列表滚轮内容 -->
            <el-scrollbar height="650px">
              <div class="demo-collapse">
                <el-collapse class="leftCollapse" accordion>
                  <el-collapse-item name="1">
                    <template #title
                      ><span
                        style="
                          color: #fafafa;
                          padding-left: 30%;
                          font-size: 15px;
                        "
                        >我创建的项目</span
                      >
                    </template>
                    <div>
                      <el-button class="button" type="primary" link></el-button>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item name="2">
                    <template #title
                      ><span
                        style="
                          color: #fafafa;
                          padding-left: 30%;
                          font-size: 15px;
                        "
                        >我加入的项目</span
                      >
                    </template>
                    <div>
                      <el-button class="button" type="primary" link></el-button>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-scrollbar>
          </el-card> </el-aside
        ><el-main>
          <!-- 主内容部分 --><el-tabs style="width: 100%">
            <!-- 我的项目 -->
            <el-tab-pane label="我的项目" name="first">
              <el-empty description="您没有打开项目" />
              <div class="new-collapse">
                <el-scrollbar height="600px" style="margin-top: 20px">
                  <el-popconfirm
                    width="220"
                    confirm-button-text="是的"
                    cancel-button-text="不了"
                    icon-color="red"
                    title="您确定要解散项目么？"
                  >
                    <template #reference>
                      <el-button class="ProjectBtn" type="danger"
                        >解散项目</el-button
                      ></template
                    >
                  </el-popconfirm>
                  <el-button class="ProjectBtn" type="primary"
                    >修改信息</el-button
                  >
                  <el-descriptions
                    title="项目信息"
                    :column="2"
                    :size="size"
                    border
                    direction="horizontal"
                  >
                    <el-descriptions-item
                      label="项目名称"
                      align="center"
                    ></el-descriptions-item>
                    <el-descriptions-item
                      label="项目类别"
                      align="center"
                    ></el-descriptions-item>
                    <el-descriptions-item label="负责人" align="center"
                      ><el-tag size="small"></el-tag
                    ></el-descriptions-item>
                    <el-descriptions-item label="创建时间" align="center">
                    </el-descriptions-item>
                    <el-descriptions-item
                      label="项目最大人数"
                      align="center"
                    ></el-descriptions-item>
                    <el-descriptions-item label="项目状态" align="center">
                      <el-tag size="small"></el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="负责人邮箱" align="center">
                    </el-descriptions-item>
                    <el-descriptions-item label="负责人电话" align="center">
                    </el-descriptions-item>
                    <el-descriptions-item label="负责人QQ" align="center">
                    </el-descriptions-item>
                    <el-descriptions-item label="项目图片" align="center">
                      <el-image
                        alt="项目图片"
                        style="width: 120px; height: 100px"
                      ></el-image>
                      <el-image
                        alt="项目图片"
                        style="width: 120px; height: 100px"
                      ></el-image>
                      <el-image
                        alt="项目图片"
                        style="width: 120px; height: 100px"
                      ></el-image>
                    </el-descriptions-item>
                    <el-descriptions-item label="项目描述" align="center">
                    </el-descriptions-item>
                  </el-descriptions>
                  <!-- 项目详细信息显示 -->
                  <div
                    style="
                      margin-top: 10px;
                      font-size: large;
                      font-family: '微软雅黑';
                    "
                  >
                    项目成员
                  </div>
                  <div>
                    <el-button link style="font-size: 20px"
                      ><el-avatar />&nbsp;&nbsp;&nbsp;&nbsp;</el-button
                    >

                    <el-tooltip
                      effect="dark"
                      content="删除用户"
                      placement="left-start"
                    >
                      <el-button class="deleteBtn" type="danger" circle
                        ><el-icon><CloseBold /></el-icon
                      ></el-button>
                    </el-tooltip>
                  </div>
                </el-scrollbar>
              </div>
            </el-tab-pane>
            <!-- 个人信息 -->
            <el-tab-pane label="个人信息" name="second">
              <el-descriptions
                class="margin-top"
                title="个人信息"
                :column="2"
                size="large"
                border
              >
                <template #extra>
                  <el-button type="primary">修改</el-button>
                  <!-- 修改信息对话框 -->
                  <el-dialog title="修改信息" width="50%" center>
                    <!-- 修改信息表单 -->
                    <el-form
                      ref="ruleFormRef"
                      :rules="rules"
                      label-width="120px"
                      class="demo-ruleForm"
                      :size="large"
                      status-icon
                    >
                      <el-row>
                        <el-form-item label="用户名" prop="userName">
                          <el-input />
                        </el-form-item>
                        <el-form-item label="姓名" prop="name">
                          <el-input />
                        </el-form-item>
                      </el-row>
                      <el-row>
                        <el-form-item label="电话" prop="phoneNumber">
                          <el-input />
                        </el-form-item>
                      </el-row>
                      <el-row>
                        <el-form-item label="邮箱" prop="email">
                          <el-input />
                        </el-form-item>
                        <el-form-item label="qq号" prop="qq">
                          <el-input />
                        </el-form-item>
                      </el-row>
                      <el-row>
                        <el-form-item label="年级" prop="classes">
                          <el-select placeholder="选择年级">
                            <el-option label="大一" value="大一" />
                            <el-option label="大二" value="大二" />
                            <el-option label="大三" value="大三" />
                            <el-option label="大四" value="大四" />
                            <el-option label="已毕业" value="已毕业" />
                          </el-select>
                        </el-form-item>
                      </el-row>
                      <el-form-item label="个人介绍" prop="description">
                        <el-input type="textarea" />
                      </el-form-item>
                    </el-form>
                    <template #footer>
                      <span class="dialog-footer">
                        <el-button type="primary"> 保存 </el-button>
                        <el-button>重置</el-button>
                      </span>
                    </template>
                  </el-dialog>
                </template>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <el-icon>
                        <user />
                      </el-icon>
                      用户名
                    </div>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <el-icon>
                        <User />
                      </el-icon>
                      真实姓名
                    </div>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <el-icon>
                        <iphone />
                      </el-icon>
                      电话
                    </div>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <el-icon>
                        <location />
                      </el-icon>
                      邮箱
                    </div>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <el-icon>
                        <location />
                      </el-icon>
                      qq号
                    </div>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <el-icon>
                        <location />
                      </el-icon>
                      年级
                    </div>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <el-icon>
                        <ChatDotRound />
                      </el-icon>
                      个人介绍
                    </div>
                  </template>
                </el-descriptions-item>
              </el-descriptions></el-tab-pane
            >
            <!-- 消息中心 -->
            <el-tab-pane label="消息中心" name="third">
              <el-row>
                <el-button type="primary" plain>全部消息</el-button>
                <el-button type="success" plain>已读消息</el-button>
                <el-button type="warning" plain>未读消息</el-button>
                <span style="color: #ababab; font-size: 12px; margin: 10px 10px"
                  >普通消息点击即视为已读</span
                >
              </el-row>
              <el-scrollbar height="600px" style="margin-top: 20px">
                <el-empty description="您目前没有消息" />
                <el-pagination
                  style="margin-left: 25%"
                  background
                  layout="total, prev, pager, next"
                  :hide-on-single-page="true"
                />
              </el-scrollbar>
            </el-tab-pane>
          </el-tabs> </el-main
      ></el-container>
    </el-card>
    <el-dialog title="修改头像" width="30%">
      <div class="avatar-uploader-container">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          accept=".jpg,.jpeg,.png"
          :auto-upload="false"
        >
          <div class="avatar-preview">
            <img class="avatar" />
          </div>
        </el-upload>
        <div class="btn-container">
          <el-button>取消</el-button>
          <el-button type="primary">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </el-container>
  <!-- 更改用户头像对话框 -->
</template>
<script></script>

<style lang="scss" scoped>
.child-div {
  position: absolute;
  left: 0%;
  width: 100%;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-container {
  height: 100%;
  max-width: 1280px;
  margin: 20px auto;
  border: 1px solid var(--el-card-border-color);
  box-shadow: #000000;
}

/* 左边框 */
.el-aside {
  height: 100%;
  width: 20%;
}
.box-card {
  height: 99%;
  width: 100%;
  padding: 5px;
  background-color: #fafafa;
}
.el-card ::v-deep .el-card__body {
  --el-card-border-color: null;
  padding: 0;
  height: 100%;
}
::v-deep .el-collapse-item__header {
  background-color: #2d2e36;
}
::v-deep .el-collapse-item__arrow {
  color: #fafafa;
}

.el-collapse {
  --el-collapse-border-color: 0;
}
.item {
  height: 40px;
  background-color: #fafafa;
}
.button {
  width: 100%;
  height: 100%;
  background-color: #1d1e26;
  border-radius: 0%;
}
::v-deep .el-collapse-item__content {
  background-color: #fafafa;
  padding: 0;
}
/* 主体内容 */
.el-main {
  position: relative;
  width: 100%;
  margin-left: 20px;
}
.el-tabs {
  width: 80%;
}
::v-deep .el-tabs__content {
  height: 100%;
  width: 100%;
}
::v-deep .el-empty {
  margin-right: 40%;
  margin-top: 15%;
}
.margin-top {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
  width: 80px;
}
.el-descriptions {
  margin-top: 20px;
}
/* 消息页面 */
.msgBtn {
  width: 90%;
  align-items: center;
  justify-content: left;
  height: 40px;
  margin: 10px;
  text-align: center;
  border-radius: 20px;
  background: var(--el-color-info-light-9);
  color: var(--el-color-info-dark-2);
}
.msgDelete {
  margin: 0;
}
.avatar-uploader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-uploader {
  width: 178px;
  height: 178px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-uploader:hover {
  border-color: var(--el-color-primary);
}

.avatar-preview {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}

.btn-container {
  margin-top: 20px;
  text-align: center;
}
.new-collapse .el-collapse-item__header {
  background-color: #888888;
}
//我的项目
.description {
  margin: 0px auto;
  max-width: 1280px;
}
.ProjectBtn {
  float: right;
  margin-bottom: 10px;
  margin-right: 10px;
}
.deleteBtn {
  float: right;
}
</style>
